<template>
  <div>
    <div class="container__right">
      <form class="content">
        <span></span>
        <div class="header">
          <h3>{{ welcomestr }}</h3>
        </div>

 
        <span>用户名</span>
        <div>
          <a-input type="text" placeholder="" autocomplete="off" v-model="model.username" />
        </div>
        <span>密码</span>
        <div>
          <a-input type="password" placeholder="" autocomplete="off" v-model="model.password" />
        </div>

        <span>验证码</span>
        <div>
          <a-col :span="16">
            <a-input type="text" placeholder="" autocomplete="off" v-model="model.inputCode" />
          </a-col>
          <a-col :span="8">
            <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage"
              @click="handleChangeCheckCode" />
            <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode" />
          </a-col>
        </div>
        <span></span>
        <div>
          <a-button @click="handleok">登录</a-button>
        </div>
      </form>
    </div>
    <!-- <span>用户名</span>

    <span></span>
    <div class="btns">
      <button class="btn confirm">登录</button>
    </div>

    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-form-model-item required prop="password">
        <a-input v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码">
          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input>
      </a-form-model-item>

      <a-row :gutter="0">
        <a-col :span="16">
          <a-form-model-item required prop="inputCode">
            <a-input v-model="model.inputCode" size="large" type="text" placeholder="请输入验证码">
              <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="8" style="text-align: right">
          <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode" />
          <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode" />
        </a-col>
      </a-row>
    </a-form-model> -->
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import Vue from 'vue'
import { mapActions } from 'vuex'
import tinymce from 'tinymce/tinymce'

export default {
  name: 'LoginAccount',
  data () {
    return {
      welcomestr: '',
      requestCodeSuccess: false,
      randCodeImage: '',
      currdatetime: '',
      loginType: 0,
      datasourcelist: [],
      model: {
        username: '',
        password: '',
        inputCode: ''
      },
      validatorRules: {
        username: [{ required: true, message: '请输入用户名!' }, { validator: this.handleUsernameOrEmail }],
        password: [
          {
            required: true,
            message: '请输入密码!',
            validator: 'click'
          }
        ],
        inputCode: [
          {
            required: true,
            message: '请输入验证码!'
          }
        ]
      }
    }
  },
  async created () {
    this.handleChangeCheckCode()

    var sysdeprtinfo = await getAction('/sys/sysDepart/getcompanydepart')
    if (sysdeprtinfo.success) {
      this.welcomestr = sysdeprtinfo.result.welcomestr;
    }

    var datasourcelistinfo = await getAction('/sys/dataSource/list')
    if (datasourcelistinfo.success) {
      this.datasourcelist = datasourcelistinfo.result.records;
    }

  },
  methods: {
    ...mapActions(['Login']),
    handleok () {
      this.$emit("ok");
    },
    /**刷新验证码*/
    handleChangeCheckCode () {
      this.currdatetime = new Date().getTime()
      this.model.inputCode = ''
      getAction(`/sys/randomImage/${this.currdatetime}`)
        .then(res => {
          if (res.success) {
            this.randCodeImage = res.result
            this.requestCodeSuccess = true
          } else {
            this.$message.error(res.message)
            this.requestCodeSuccess = false
          }
        })
        .catch(() => {
          this.requestCodeSuccess = false
        })
    },
    // 判断登录类型
    handleUsernameOrEmail (rule, value, callback) {
      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
      if (regex.test(value)) {
        this.loginType = 0
      } else {
        this.loginType = 1
      }
      callback()
    },
    /**
     * 验证字段
     * @param arr
     * @param callback
     */
    validateFields (arr, callback) {
      let promiseArray = []
      for (let item of arr) {
        let p = new Promise((resolve, reject) => {
          this.$refs['form'].validateField(item, err => {
            if (!err) {
              resolve()
            } else {
              reject(err)
            }
          })
        })
        promiseArray.push(p)
      }
      Promise.all(promiseArray)
        .then(() => {
          callback()
        })
        .catch(err => {
          callback(err)
        })
    },
    acceptUsername (username) {
      this.model['username'] = username
    },
    //账号密码登录
    handleLogin (rememberMe) {
      if (this.model.username == "") {
        this.$message.error("用户名必填");
        return;
      }
      if (this.model.password == "") {
        this.$message.error("密码必填");
        return;
      }
      if (this.model.inputCode == "") {
        this.$message.error("验证码必填");
        return;
      }
      let loginParams = {
        username: this.model.username,
        password: this.model.password,
        captcha: this.model.inputCode,
        checkKey: this.currdatetime,
        remember_me: rememberMe,
        dsid: this.model.dsid,
      }
      console.log('登录参数', loginParams)
      this.Login(loginParams)
        .then(res => {
          this.$emit('success', res.result)
        })
        .catch(err => {
          //update-begin-author: taoyan date:20220425 for: 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变 #41
          if (err && err.code === 412) {
            this.handleChangeCheckCode()
          }
          //update-end-author: taoyan date:20220425 for: 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变 #41
          this.$emit('fail', err)
        })

      // this.validateFields(['username', 'password', 'inputCode'], err => {
      //   if (!err) {
      //     let loginParams = {
      //       username: this.model.username,
      //       password: this.model.password,
      //       captcha: this.model.inputCode,
      //       checkKey: this.currdatetime,
      //       remember_me: rememberMe
      //     }
      //     console.log('登录参数', loginParams)
      //     this.Login(loginParams)
      //       .then(res => {
      //         this.$emit('success', res.result)
      //       })
      //       .catch(err => {
      //         //update-begin-author: taoyan date:20220425 for: 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变 #41
      //         if (err && err.code === 412) {
      //           this.handleChangeCheckCode()
      //         }
      //         //update-end-author: taoyan date:20220425 for: 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变 #41
      //         this.$emit('fail', err)
      //       })
      //   } else {
      //     this.$emit('validateFail')
      //   }
      // })
    }
  }
}
</script>

<style scoped>
.container {
  /* 相对定位 */
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 15px;
  /* 弹性布局 垂直排列 */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 350px;
  height: 400px;
  /* 阴影 */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.container .tit {
  font-size: 26px;
  margin: 65px auto 70px auto;
}

.container input {
  width: 280px;
  height: 30px;
  text-indent: 8px;
  border: none;
  border-bottom: 1px solid #ddd;
  outline: none;
  margin: 12px auto;
}

.container button {
  width: 280px;
  height: 40px;
  margin: 35px auto 40px auto;
  border: none;
  background-color: rgb(59, 130, 246);
  color: black;
  font-weight: bold;
  letter-spacing: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.5s;
}

/* .container button:hover {
  background: linear-gradient(-200deg, #aac2ee, #fac0e7);
  background-position-x: -280px;
} */
</style>
